<template>
  <el-scrollbar wrap-class="company-wrapper">
    <el-menu :default-active="curCompany" :background-color="variables.menuBg" :text-color="variables.menuText"
      :unique-opened="true" :active-text-color="variables.activeMenuText" :collapse-transition="false" mode="horizontal">
      <SidebarItem v-for="compony in organizationList" :key="compony.organizationNo" :item="compony"
        @chooseCompany="chooseCompany" />
    </el-menu>
  </el-scrollbar>
</template>

<script>
// import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem";
import variables from "@/styles/variables.scss";
import { getToken } from "@/utils/auth";

export default {
  components: { SidebarItem },
  props: {
    organizationList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    variables () {
      return variables;
    },
    curCompany () {
      return getToken('organizationNo')
    }
  },
  methods: {
    chooseCompany (company) {
      console.log('chooseCompany222', company);
      this.$emit('chooseCompany', company);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-scrollbar {
  width: 100% !important;
  padding: 10px;
}

.el-menu {
  border-right: none;
}
</style>
